<!--
 * @Description: 图书详情 -- book_detail
 * @Author: your name
 * @Date: 2024-05-27
 * @LastEditTime: 2024-05-27
 * @LastEditors: Please set LastEditors
-->

<template>
  <div>
    <div class="layout">
      <div class="handpick heart_w">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{ boxTitle }}</el-breadcrumb-item>
        </el-breadcrumb>

        <div v-for="item_t in booksInfoList" :key="item_t.id">
          <div class="container_content" v-if="item_t.position == nowposition">
            <div class="container_content_imagelist">
              <el-carousel
                trigger="click"
                height="336px"
                indicator-position="outside"
              >
                <el-carousel-item>
                  <el-image :src="item_t.image"></el-image>
                </el-carousel-item>
              </el-carousel>
            </div>

            <div class="container_content_message">
              <h3>{{ item_t.title_h }}</h3>
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                "
              >
                <h4>书籍简介：{{ item_t.describe }}</h4>
                <el-button
                  type="primary"
                  round
                  class="btns_t"
                  @click="dialogSrc(item_t)"
                >
                  在线咨询
                  <i class="el-icon-s-comment"></i>
                </el-button>
              </div>
              <p class="press">出版社：美国Wiley出版社 出版时间：2023-08-15</p>
              <div class="message_dis">
                <h3>书籍详情：</h3>
                <p>
                  {{ item_t.content }}
                </p>
              </div>

              <!-- 科目 -->
              <!-- <div class="chosebox">
                <h4>选择科目:</h4>
                <div class="choswitem">
                  <span
                    :class="{ active: com == i }"
                    v-for="(item, i) in item_t.titleArr"
                    :key="i"
                    @click="spanActive(i)"
                  >
                    {{ item.title_t }}
                  </span>
                </div>
              </div> -->
              <!-- 价格 -->
              <div class="content_message_validity">
                <div class="message_validity_item">课程永久有效哦！</div>
                <div class="content_message_priceBox">
                  <div class="message_priceBox_item">
                    <div>
                      <span>价格：</span>
                    </div>
                    <div>
                      <span class="free">￥ {{ item_t.price }}</span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="handle">
                <div @click="CollectionAdd">
                  <i class="iconfont icon-shoucang" v-if="coll_val"></i>
                  <i
                    class="iconfont icon-shoucang2"
                    style="color: #ff8140"
                    v-else
                  >
                  </i>
                  收藏
                </div>
                <div>
                  <el-button
                    type="primary"
                    round
                    class="btns_t"
                    @click="AddshoppingCart(item_t)"
                  >
                    加入购物车
                  </el-button>
                  <el-button type="primary" round @click="freeLearning(item_t)">
                    立即购买
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container heart_w">
      <div class="container_detils">
        <div class="detils_con">
          <!-- tabs栏 -->
          <div class="container_selectTap">
            <div class="selectTap_item">
              <div class="selectTap_tip" :style="{ left: select_val + 'px' }">
                <img
                  src="http://zhishifufei.crmeb.net/pc/images/select.png"
                  alt=""
                />
              </div>
              <div
                :class="{ selectTap: true, selectEd: rankId == index }"
                v-for="(item, index) in tabsList"
                :key="item.tid"
              >
                <!-- @click="tabsTitles(index, item)" -->
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>

          <div class="container_content_detils">
            <!-- 1. 详情 -->
            <div class="detils_content" v-if="baseId_img == '详情'">
              <p>
                <img
                  src="http://cremb-zsff.oss-cn-beijing.aliyuncs.com/cb51d202103301112066634.jpg"
                />
              </p>
            </div>
          </div>
        </div>

        <!-- 推荐课程 -->
        <div class="detils_propaganda">
          <div class="propaganda_recommend">
            <div class="recommend_more">
              <div>相关课程推荐</div>
              <div>更多<i class="el-icon-arrow-right"></i></div>
            </div>

            <div class="propaganda_con">
              <div>
                <a
                  href="javascript:void(0);"
                  v-for="item_li in recommendBook"
                  :key="item_li.id"
                >
                  <el-image :src="item_li.image"></el-image>
                  <div>
                    <div class="title">{{ item_li.title }}</div>
                    <div class="browse-money"></div>
                    <div class="label-count">
                      <div>{{ item_li.buy_nums }}人已学</div>
                      <div class="money">
                        ￥
                        <span>{{ item_li.price }}</span>
                      </div>
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="add_shopcar">
      <a :href="`#/order_Book?id=${comboId}&type=${2}`">
        购物车
        <span>{{ shoppingCartNum }}</span>
      </a>
    </div>

    <el-dialog
      :visible.sync="dialogCode"
      width="15%"
      top="38vh"
      :before-close="handleClose"
      custom-class="border-dialog"
      style="text-align: center"
    >
      <el-image :src="consult_url"></el-image>
    </el-dialog>
  </div>
</template>

<script>
import {
  getBookInfo,
  addBookCollection,
  getCount,
  getCountAdd,
  getListByLike
} from '@/api/book_details.js'

export default {
  name: 'book_detail',
  data() {
    return {
      consult_url: '',
      rankId: 0,
      shoppingCartNum: 0,
      boxTitle: '',
      baseId_img: '详情',
      comboId: '',
      idt: '',
      com: 0,
      nowposition: 1, //当前
      booksInfoList: [],
      coll_val: true,
      select_val: 0,
      dialogCode: false,
      recommendBook: [],
      tabsList: [
        {
          name: '详情',
          tid: 113
        }
      ]
    }
  },
  created() {
    this.idt = this.$route.query.id
    // console.log(this.$route.query)
    this.getBookList()
    this.getShoppingCartNumber()
    this.getRecommendBook()
  },
  methods: {
    async getRecommendBook() {
      const { data: data } = await getListByLike({ book_id: this.idt })
      this.recommendBook = data.data
    },
    async CollectionAdd() {
      this.coll_val = !this.coll_val
      if (this.coll_val == false) {
        await addBookCollection({ id: 1 })
        layer.msg('收藏成功')
      } else {
        await addBookCollection({ id: 1 })
        layer.msg('取消收藏')
      }
    },
    getBookList() {
      let _that = this
      let position_num = 0
      getBookInfo({ id: this.idt }).then(({ data: data }) => {
        this.boxTitle = data.data.box.title
        this.comboId = data.data.box.id

        let subjectArr = []
        data.data.goods.map((ele, index) => {
          position_num++
          if (ele.position) {
            ele.position = ele.position
          } else {
            ele.position = position_num
          }

          if (ele.title_h) {
            ele.title_h = ele.title_h
          } else {
            ele.title_h = data.data.box.title
          }

          if (ele.titleArr) {
            ele.titleArr = ele.titleArr
          } else {
            let arr = {
              id: position_num,
              title_t: ele.title
            }
            subjectArr.push(arr)
            ele.titleArr = subjectArr
          }

          _that.booksInfoList.push(ele)

          return ele
        })
        console.log(_that.booksInfoList)
      })
    },
    async AddshoppingCart(item) {
      console.log(item)
      let { data: data } = await getCountAdd({ goods_id: item.id })
      if (data.code == 1) {
        this.getShoppingCartNumber()
        this.$message.success({
          type: 'success',
          iconClass: ' ', // 这个会覆盖图标类名，为了实现去掉图标的操作
          customClass: 'el-message--success',
          message: data.msg
        })
      }
    },
    async getShoppingCartNumber() {
      let { data: data_s } = await getCount()
      this.shoppingCartNum = data_s.data
    },
    dialogSrc(item) {
      this.dialogCode = true
      this.consult_url = item.yuyue_image
    },
    handleClose(done) {
      done()
    },
    freeLearning(item) {
      this.$router.push({
        path: '/confirm_order_combo',
        query: { id: item.id, type: 2 }
      })
    },
    spanActive(i) {
      this.com = i
      this.nowposition = this.booksInfoList[i].position
    },
    tabsTitles(index, item) {
      this.rankId = index
      this.select_val = 113 * index
      this.baseId_img = item.name
    }
  }
}
</script>

<style lang="scss">
.border-dialog {
  border-radius: 15px !important;
}
</style>

<style scoped lang="scss">
@import '@/assets/styles/handpick.scss';

.add_shopcar {
  position: fixed;
  top: 42%;
  right: 0;
  margin-top: -75px;
  height: 150px;
  width: 42px;
  background: rgba(68, 72, 81, 0.8);
  color: #fff;
  border-radius: 5px;

  a {
    width: 16px;
    display: block;
    text-align: center;
    margin: 0 auto;
    font-size: 14px;
    padding-top: 21px;
    &:hover {
      color: inherit;
    }

    span {
      display: block;
      height: 21px;
      width: 21px;
      border-radius: 100%;
      background-color: #bd0000;
      color: #fff;
      margin: 15px 0 0 -4px;
      text-align: center;
      line-height: 21px;
    }
  }
}
</style>
